import React, { Component } from 'react';
import { Col } from 'antd';
import ShowType from '../../../routes/common/showType';

class ReserveFieldsComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reserveContent: '',
    };
  }

  componentWillMount() {
    /* 添加预留字段 */
    const {
      mainConfig, sId, dataList, app, form,
    } = this.props;
    if (Object.keys(mainConfig).length > 0) {
      const { sActiveId, disabled } = this.props;
      const reserveData = [];
      mainConfig.forEach((child) => {
        const { sName } = child;
        if (sName.indexOf('Reserve') > 0) {
          reserveData.push({
            sName: child.sName,
          });
        }
      });
      const reserveContent = reserveData.map((child) => {
        const { sName } = child;
        const childProps = {
          app, form, sActiveId, sId, dataList, disabled,
        };
        const showConfig = mainConfig.filter(item => (item.sName === sName))[0];
        const reserveProps = { showConfig, ...childProps };
        return (
          <Col
            key={showConfig.sId}
            span={6}
            order={showConfig.iOrder > 24 ? 24 : showConfig.iOrder}
            style={{ display: showConfig.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName={child.sName} {...reserveProps} />
          </Col>
        );
      });
      this.setState({ reserveContent });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      mainConfig, sId, dataList, app, form, handleModalPane, dataName, dataType,
    } = nextProps;
    const { sActiveId, disabled } = nextProps;
    /* 添加预留字段 */
    const reserveData = [];
    mainConfig.forEach((child) => {
      const { sName } = child;
      if (sName.indexOf('Reserve') > 0) {
        reserveData.push({
          sName: child.sName,
        });
      }
    });
    const reserveContent = reserveData.map((child) => {
      const { sName } = child;
      const childProps = {
        app, form, sActiveId, sId, dataList, disabled, handleModalPane, dataName, dataType,
      };
      const showConfig = mainConfig.filter(item => (item.sName === sName))[0];
      const reserveProps = { showConfig, ...childProps };
      return (
        <Col
          key={showConfig.sId}
          span={6}
          order={showConfig.iOrder > 24 ? 24 : showConfig.iOrder}
          style={{ display: showConfig.bVisible ? 'block' : 'none' }}
        >
          <ShowType sName={child.sName} {...reserveProps} />
        </Col>
      );
    });
    this.setState({ reserveContent });
  }

  render() {
    const { reserveContent } = this.state;
    return (
      <div>
        {reserveContent}
      </div>
    );
  }
}

export default ReserveFieldsComponent;
